<template>
    <div class="manual-dispatch">

    <!-- 货物信息 -->
    <el-card class="box-card">
         <div slot="header" class="clearfix">
          <span>货物信息</span>
        </div>
        <el-table :data="goodsData" style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="110px"></el-table-column>
          <el-table-column  label="始发地" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.dpaProvince }}</span>/ 
              <span> {{ scope.row.dpaCity }}</span> 
            </template>
          </el-table-column>
          <el-table-column  width="150px" label="目的地">
            <template slot-scope="scope">
              <span>{{ scope.row.cdaProvince }}</span>/ 
              <span> {{ scope.row.cdaCity }}</span> 
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="货物名称"></el-table-column>
          <el-table-column  label="数量">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsCount }}</span> 箱
            </template>
          </el-table-column>
          <el-table-column prop="goodsVolume" label="体积(m³)"></el-table-column>
          <el-table-column prop="goodsWeight" label="重量(kg)"></el-table-column>
          <el-table-column prop="transportationFee" label="分销运费(元)" width="120px">
            <template slot-scope="scope">
              <span>{{ (scope.row.transportationFee/3).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="packagingFee" label="装卸费(元)">
            <template slot-scope="scope">
              <span>{{ (scope.row.packagingFee / 3).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="loadingFee" label="包装费(元)">
            <template slot-scope="scope">
              <span>{{ (scope.row.loadingFee / 3).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
         <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6"><div class="info-item"><span>总数量：</span>{{ this.goodsData[0].allCount }} </div></el-col>
          <el-col :span="6"><div class="info-item"><span>总体积：</span>{{this.goodsData[0].allVolume  }}m³ </div></el-col>
          <el-col :span="6"><div class="info-item"><span>总重量：</span>{{ this.goodsData[0].allWeight }} kg</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>计费方式：</span>
            {{ this.goodsData[0].billingMethod ==0?'按重量':'按体积'}}
          </div></el-col>
          <el-col :span="6"><div class="info-item"><span>运费成本：</span>{{ this.goodsData[0].transportationFee }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>包装费：</span>{{ this.goodsData[0].packagingFee }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>装卸费：</span>{{this.goodsData[0].loadingFee  }}元</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>其他费用：</span>{{ this.goodsData[0].otherFees }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>运费合计：</span>{{ this.goodsData[0].totalFee }}元</div></el-col>
        </el-row> 
      </el-card>
     
  
      <!-- 承运商 -->
      <el-card class="section">
        <div slot="header">
          <span>承运商</span>
        </div>
        <el-form :model="carrierForm" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="承运商名称">
                <el-select v-model="carrierForm.id"  filterable  placeholder="请选择" @change="handleSelect">
                  <el-option
                        v-for="carrier in carriers"
                        :key="carrier.id"
                        :label="carrier.companyName"
                        :value="carrier.id">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人姓名">
                <el-input v-model="carrierForm.legalPerson"  :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码">
                <el-input v-model="carrierForm.phone" :disabled="true" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :model="dirverForm" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="司机姓名">
                <el-select v-model="dirverForm.id" placeholder="请选择" @change="handleSelectDriver">
                  <el-option
                        v-for="driver in drivers"
                        :key="driver.id"
                        :label="driver.name"
                        :value="driver.id">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码">
                <el-input v-model="dirverForm.contact"  :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :model="carsForm" label-width="100px" >  
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="车牌号" >
                <el-select  v-model="carsForm.id"  @change="handleSelectCar">
                  <el-option
                    v-for="car in cars"
                    :key="car.id"
                    :label="car.licensePlate"
                    :value="car.id">
                </el-option>
                </el-select >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车型">
                <el-input v-model="carsForm.vehicleType"  :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车长">
                <el-input v-model="carsForm.vehicleLength"  :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
     

        <!-- 其他信息 -->
    <el-card class="section">
    <div slot="header">
        <span>其他信息</span>
    </div>
    <el-form :model="otherInfo" label-width="120px">
        <el-row :gutter="20">
        <el-col :span="10">
            <el-form-item label="计划发车时间">
            <el-date-picker
                v-model="otherInfo.planDepartureTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="validateTimes">
            </el-date-picker>
            </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="实际发车时间" >
            <el-date-picker
                v-model="otherInfo.actualDepartureTime"
                type="datetime"
                placeholder="选择日期时间" :disabled="true">
            </el-date-picker>
            </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="计划到达时间">
            <el-date-picker
                v-model="otherInfo.planArrivalTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="validateTimes"
                >
            </el-date-picker>
            </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="实际到达时间" >
            <el-date-picker
                v-model="otherInfo.actualArrivalTime"
                type="datetime"
                placeholder="选择日期时间" :disabled="true">
            </el-date-picker>
            </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    </el-card>
  
      <!-- 底部悬浮按钮 -->
    <div class="fixed-bottom">
        <div class="button-container">
            <el-button size="small" @click="returnWaybill">取消</el-button>
            <el-button size="small" type="primary" @click="save">保存</el-button>
        </div>
    </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ManualDispatch',
    data() {
      return {
        waybillId:'',
        carriers:[],  //承运商下拉框
        drivers:[],  // 司机下拉框
        cars:[], //车牌号下拉框
        goodsData:[], //货物信息
        carrierForm: { },//承运商模块信息  //承运商法人和电话信息
        dirverForm:{ }, //司机模块信息 司机手机号码
        carsForm:{}, //车牌号模块信息 ，车型，车长
        otherInfo: {},  //其他信息  时间信息
      }
    },
    methods: {
      queryGoodsDetail(){ //货物信息
        this.$axios.get("/api/waybill/queryGoodsDetail/" + this.waybillId)
              .then(resp => {
                console.log(11111111111111111111111111111111111)
                  console.log(resp.data)
                  this.goodsData = resp.data.data
              })
      },
      queryDispatch() {//查询承运商信息回显
          this.$axios.get("/api/waybill/queryDispatch/" + this.waybillId)
              .then(resp => {
                console.log("查询承运商信息回显")
                  console.log(resp.data)
                  if(resp.data.data)
                    this.carrierForm = resp.data.data
              })
      },
      queryD() {//查询司机信息回显
          this.$axios.get("/api/waybill/queryD/" + this.waybillId)
              .then(resp => {
                console.log("查询司机信息回显")
                  console.log(resp.data)
                  if(resp.data.data)
                    this.dirverForm = resp.data.data
              })
      },
      queryC() {//查询车牌号信息回显
          this.$axios.get("/api/waybill/queryC/" + this.waybillId)
              .then(resp => {
                console.log("查询车牌号信息回显")
                  console.log(resp.data)
                  if(resp.data.data)
                    this.carsForm = resp.data.data
              })
      },
      queryDate(){  //回显时间
        this.$axios.get("/api/waybill/queryDate/" + this.waybillId)
              .then(resp => {
                console.log("查询信息回显")
                  console.log(resp.data)
                  if(resp.data.data)
                    this.otherInfo = resp.data.data
              })
      },
      queryAllLogisticsPartner() {//查询所有承运商下拉框
          this.$axios.get("/api/waybill/queryAllLogisticsPartner" )
              .then(resp => {
                console.log("查询所有承运商下拉框")
                  console.log(resp.data)
                  this.carriers = resp.data.data
              })
      },
      handleSelect(value){  //点击承运商下拉框，触发事件，查询 联系人姓名，手机号
      // 这里 value 是被选中的 carrier 的 id 
      console.log('Selected carrier ID:', value); 
      this.$axios.get("/api/waybill/queryBySelect/"+value)
          .then(resp => {
              console.log(resp.data)
              this.carrierForm = resp.data.data
          })
      },
      queryDriver() {//查询所有司机下拉框
          this.$axios.get("/api/waybill/queryDriver" )
              .then(resp => {
                console.log("查询所有司机下拉框")
                  console.log(resp.data)
                  this.drivers = resp.data.data
              })
      },
      handleSelectDriver(value){  //点击司机下拉框，触发事件，查询 司机相关信息
        console.log('Selected Driver ID:', value); 
        this.$axios.get("/api/waybill/querySelectDriver/"+value )
              .then(resp => {
                  console.log(resp.data)
                  this.dirverForm = resp.data.data
        })
        this.queryLicenseLate()
      },

      queryLicenseLate() {//根据司机id 查询车牌号下拉框
          this.$axios.get("/api/waybill/queryLicenseLate/" + this.dirverForm.id)
              .then(resp => {
                  // console.log(resp.data)
                  this.cars = resp.data.data
                  console.log("========")
                  console.log(this.cars)
                  this.carsForm=''
              })

      },

      handleSelectCar(value){  //点击车牌号下拉框，触发事件，查询 车型，车长
        console.log('Selected Car ID:', value); 
        this.$axios.get("/api/waybill/querySelectCar/"+value )
              .then(resp => {
                  console.log(resp.data)
                  this.carsForm = resp.data.data
        })
      },
      validateTimes() {
      if (this.otherInfo.planDepartureTime && this.otherInfo.planArrivalTime) {
        if (this.otherInfo.planArrivalTime <= this.otherInfo.planDepartureTime) {
          this.$message({
            message: '计划到达时间不能早于或等于计划发车时间，请重新选择',
            type: 'warning'
          });
          this.otherInfo.planArrivalTime = null; // 清空计划到达时间
        }
      }
    },


      save(){   //保存按钮
        let saveParam = {};
        saveParam.carrierId=this.carrierForm.id  //承运商id
        saveParam.driverId=this.dirverForm.id  //司机id
        saveParam. carId= this.carsForm.id  //车牌id
        saveParam.id=this.waybillId //运单号
        saveParam.planDepartureTime=this.otherInfo.planDepartureTime //计划发车时间
        saveParam.planArrivalTime=this.otherInfo.planArrivalTime //计划到达时间
        this.$axios.post("/api/waybill/save",saveParam)
        .then(resp => {
            console.log(saveParam)
            console.log(resp.data)
            if(resp.data.code==200){
              this.$message({
                  message: '分配成功',
                  type: 'success'
              });
              this.returnWaybill()  //成功后返回首页
            }
            if(resp.data.code==2009){
              this.$message({
                  message: '分配失败，超过车载体积，请重新分配',
                  type: 'warning'
              });
            }
            if(resp.data.code==2010){
              this.$message({
                  message: '请选择必选项完成分配',
                  type: 'warning'
              });
            }
        })
      },

      returnWaybill(){
        //返回waybill页面
        this.$router.push({ path: '/waybill'})
      },


    },
    mounted() {
      this.waybillId=this.$route.query.waybillId
      this.queryLicenseLate()
      this.queryD()
      this.queryC()
      this.queryDispatch()
      this.queryAllLogisticsPartner()
      this.queryDriver()
      this.queryDate()
      this.queryGoodsDetail()
    }
    
  }
  </script>
  
  <style scoped>
  .manual-dispatch {
    padding: 20px;
    padding-bottom: 60px; /* 为底部按钮留出空间 */
  }
  .section {
    margin-bottom: 20px;
  }
  .fixed-bottom {
    width: 79%;
    margin-left: 240px; /*调整悬浮div左边距 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 10px 20px;
    text-align: right;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  .button-container {
    display: flex;
    justify-content: flex-end; /* 使按钮靠右对齐 */
    padding-right: 20px; /* 右侧留出一些空间 */
    margin-left: 50px ;
    }
    .button-container .el-button {
    margin-left: 10px;
    }
    .box-card {
    margin-bottom: 20px;
  }

  </style>